<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>定义菜单旋转的原点</title>
<style type="text/css">
ul {
	margin-top:30px;
	list-style:none;
	line-height:25px;
	font-family:Arial;
	font-weight:bold;
}
li {
	width:120px;
	float:left;
	margin:2px;
	border:1px solid #ccc;
	background-color:#e4e4e4;
	text-align:left;
}
li a {
	display:block;
	padding:5px 10px;
	color:#333;
	text-decoration:none;
	/* 变形原点：自定义 */
	-webkit-transform-origin:0 0;     /* 兼容webkit内核 */
	-moz-transform-origin:0 0;        /* 兼容gecko内核 */
	-o-transform-origin:0 0;          /* 兼容presto内核 */
	-ms-transform-origin:0 0;         /* 兼容IE9 */
	transform-origin:0 0;             /* 标准写法 */
}
li:hover {
	background-color:#999;               /* 深灰色 */
}
li:hover a{
	background-color:#f90;
	color:#FFF;	
	/* 变形方式：旋转 */
	-webkit-transform:rotate(30deg);     /* 兼容webkit内核 */
	-moz-transform:rotate(30deg);        /* 兼容gecko内核 */
	-o-transform:rotate(30deg);          /* 兼容presto内核 */
	-ms-transform:rotate(30deg);         /* 兼容IE9 */
	transform:rotate(30deg);             /* 标准写法 */
}
</style>
</head>
<body>
<ul>
  <li><a href="#">HTML5</a></li>
  <li><a href="#">CSS3</a></li>
  <li><a href="#">jQuery</a></li>
  <li><a href="#">Ajax</a></li>
</ul>
</body>
</html>